import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  components: {
    quillEditor
  },
  created() {
    this.getData();
  },
  data() {
    const checkCat = (rule, value, callback) => {
      if (this.cascaderValues.length !== 3) {
        return callback(new Error("商品的分类级别必须为第三级"));
      }
      callback();
    };
    return {
      // 当前完成的步骤
      stepActive: 0,
      form: {
        goods_name: "",
        goods_cat: "", //以为','分割的分类列表
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        attrs:[],
        pics: [],
        goods_introduce: ""
      },
      rules: {
        goods_name: [
          { required: true, message: "商品名称必填", trigger: "blur" }
        ],
        // 自定义检测
        goods_cat: [{ validator: checkCat, trigger: "change" }],
        goods_price: [
          { required: true, message: "商品价格必填", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "商品数量必填", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "商重量必填", trigger: "blur" }
        ]
      },
      //   级联相关数据
      cascaderValues: [], //选中的级联
      cascaderOptions: [],
      cascaderProps: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id"
      },
      //   参数相关的数据
      manyAttrs: [],
      onlyAttrs: [],
      // 上传相关数据
      uploadUrl: this.$http.defaults.baseURL + "upload",
      uploadHeaders: { Authorization: window.sessionStorage.getItem("token") },
      dialogVisible: false,
      dialogImageUrl: ""
    };
  },
  methods: {
    // 点击左侧tab栏进行切换
    // changeTab(tab) {
    //   this.stepActive = +tab.index;
    // },
    async getData() {
      const {
        data: { data, meta }
      } = await this.$http.get(`categories`);
      if (meta.status !== 200) return this.$message("获取级联数据失败");
      this.cascaderOptions = data;
    },
    // 级联选择器事件
    cascaderChange() {
      if (this.cascaderValues.length === 3) {
        this.form.goods_cat = this.cascaderValues.join(",");
      } else {
        this.form.goods_cat = "";
      }
    },
    // 点击左侧tab栏进行切换，比较tab-click事件·
    beforeLeave(now, old) {
      // console.log(now);
      // console.log(old);
      if (old == 0) {
        return new Promise((resolve, reject) => {
          this.$refs.form.validate(valid => {
            if (valid) {
              this.stepActive = +now;
              this.getParamsData("many");
              this.getParamsData("only");
              resolve();
            } else {
              reject();
            }
          });
        });
      } else {
        this.stepActive = +now;
      }
    },
    async getParamsData(type) {
      const id = this.cascaderValues[2];
      const {
        data: { data, meta }
      } = await this.$http.get(`categories/${id}/attributes`, {
        params: { sel: type }
      });
      if (meta.status !== 200) return this.$message.error("获取参数失败");
      this[type + "Attrs"] = data;
    },
    // 预览图片
    previewImage(file) {
      this.dialogImageUrl = file.response.data.url;
      this.dialogVisible = true;
    },
    removeImage(file) {
      const url = file.response.data.tmp_path;
      const index = this.form.pics.findIndex(item => item.pic === url);
      this.form.pics.splice(index, 1);
    },
    successImage(response){
      this.form.pics.push({pic:response.data.tmp_path});
    },
    async addgoods(){
      this.form.attrs = [...this.manyAttrs, ...this.onlyAttrs];
      console.log(this.form);
      const {
        data: { meta }
      } = await this.$http.post("goods", this.form);
    
      if (meta.status !== 201) return this.$message.error("保存商品信息失败");
      // 成功 去列表查看
      // 商品列表是一个组件  /goods 关联
      this.$router.push("/goods");
    }
  }
};
